<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			padding: 10px;
			border: 2px solid #000;
			margin: 20px;
		}
		.content{
			width: 1000px;
			margin: 0 auto;
			font-size: 0;
		}
		.content div{
			width: 250px;
			height: 250px;
			background-color: red;
			font-size: 18px;
			display: inline-block;
			border: 1px solid #000;
			padding: 10px;
/*			margin: 10px;*/
			box-sizing: border-box;
/*			转换为 IE盒模型*/
		}
	</style>
</head>
<body>
	<!-- width+padding+border+margin == 盒模型 == 实际所占空间-->
	<!-- 实际容器大小 -->
	<!-- 我们设置的宽高不包含 内边距和边框 这种盒模型 我们称之为 标准盒模型 -->
	<!-- IE盒模型（怪异盒模型） -->
	<!-- 设置的宽和高包含内边距和边框的 -->
	<!-- box-sizing:border-box  变为IE盒模型 -->

	<!-- 一个  1000px 盒子 -->
	<!-- 一行里面放四个小盒子 每个小盒子 -->
	<div class="content">
		<div>111</div>
		<div>222</div>
		<div>333</div>
		<div>444</div>
	</div>
	<!-- <div class="box">今天吃猪脚饭</div> -->
</body>
</html>